 <template>
	<div class="rating_page" >
        <head-top head-title="创建活动" go-back='true'></head-top>
        <el-form label-position="top" label-width="auto" size="mini" style="background-color:#FFFFFF">
            <el-form-item label="活动名称">
                <el-input v-model="jlifeActive.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-input v-model="jlifeActive.location"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-date-picker
                    v-model="jlifeActive.date"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00">
                </el-date-picker>
            </el-form-item>
            
            <el-form-item label="活动描述">
                <el-input v-model="jlifeActive.details" ></el-input>
            </el-form-item>

            <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="addImages">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                    >
                    <i class="el-icon-download"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
             <el-form-item>
                <el-button type="primary" @click="submitForm">立即创建</el-button>
            </el-form-item>
        </el-form>
        
    </div>
</template>

<script>
	import headTop from 'src/page/active/activeDetail/headTitle/headTitle'
    import {getImgPath} from 'src/components/common/mixin'
    import ratingStar from 'src/components/common/ratingStar'
    import buyCart from 'src/components/common/buyCart'
    import {imgBaseUrl} from 'src/config/env'

    export default {
    	data(){
            return{
                jlifeActive:{
                    name:'', // 活动名称
                    details:'', // 详情
                    date:'', // 时间
                    location:'', // 地址
                    createdBy:'' // 创建人
                },
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false, 
                imageList:[] , // 图片集合
                formdatas: new FormData(), // 上传表单信息
                upUrl:'http://172.16.9.9:8081/active/jlife-active/addJlifeActive'//上传路径
            }
        },
        created(){
        	this.jlifeActive.createdBy = sessionStorage.getItem("userId");
        },
        components: {
        	headTop,
            ratingStar,
            buyCart,
        },
        props:[],
        methods: {
            submitForm(){
                var vm = this;
                this.jlifeActive.createdBy=sessionStorage.getItem("userId");
                var jlifeActiveStr = JSON.stringify(this.jlifeActive);
                this.formdatas.append('jlifeActive',jlifeActiveStr);

                this.imageList.forEach((file) => {
                    this.formdatas.append('files',file.raw)
                });

                vm.axios({
                    method:'post',
                    url: this.upUrl,
                    data:this.formdatas,
                    contentType:false,
                    processData:false,
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                    
                }).then((res)=>{
                   this.$router.push('/active');
                })
            },
            handleRemove(file) {
                //console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
      
                this.dialogVisible = true;
        
                
            },
            handleDownload(file) {
               // console.log(file);
            },
            addImages(file){
                // 文件集合
                this.imageList.push(file); 
            }
        },
        mounted(){
           
        }
    }
</script>
	
<style lang="scss" scoped>
    @import 'src/style/mixin';
	
	.rating_page{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 12;
        padding-top: 1.95rem;
        p, span{
            font-family: Helvetica Neue,Tahoma,Arial;
        }
	}
    .header_img{
        position: relative;
        .food_img{
            width: 100%;
            display: block;
        }
        .cover{
            position: absolute;
            @include wh(100%, 100%);
            top: 0;
            left: 0;
        }
    }
    .description{
        @include sc(.6rem, #666);
        margin-top: .5rem;
        line-height: .8rem;
        bottom: .2rem;
        padding: 0 .4rem;
    }
    .detail_container{
        padding: .5rem;
        @include fj;
        align-items: center;
        .detail_left{
            p:nth-of-type(1){
                @include sc(.7rem, #333);
                margin-bottom: .2rem;
            }
            .rating_sale{
                display: flex;
                align-items: center;
                span:nth-of-type(1){
                   @include sc(.6rem, #666);
                   margin-right: .2rem;
                }
                span:nth-of-type(2){
                    @include sc(.55rem, #f60);
                    margin-left: .2rem;
                }
                span:nth-of-type(3){
                   @include sc(.6rem, #666);
                    margin-left: .4rem;
                }
            }
            p:nth-of-type(2){
                font-size: 0;
                margin-top: .3rem;
                span:nth-of-type(1){
                    @include sc(.6rem, #666);
                    margin-right: .4rem;
                }
                span:nth-of-type(2),span:nth-of-type(3){
                    @include sc(.6rem, #f60);
                    margin-right: .2rem;
                }
            }
            p:nth-of-type(3){
                span{
                    @include sc(.6rem, #666);
                }
            }
        }
    }

.text {
    font-size: 16px;
  }

  .item {
    margin-bottom: 8px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 300px;
  }
    .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
